<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>四维地图轨迹回放</title>

		<!-- <link rel="stylesheet" href="js/jquery-ui.min.css"> -->
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
		<script type="text/javascript" language="javascript" src="http://a.qqearth.com:81/SE_JSAPI?v=ol&uid=xzjc"></script>
		<script src="http://a.map.icttic.cn:81/SE_JSAPI?v=ol&uid=xzjc"></script>
		<script>
			//点类
			function Point(x, y) {
				this.x = x
				this.y = y
				this.set = function (x, y) {
					this.x = x
					this.y = y
				}
				this.clone = function () {
					return new Point(this.x, this.y)
				}
			}
			//包围盒类
			function Box(min, max) {
				this.min = min
				this.max = max
				if (!this.valid()) this.swap()
				this.valid = function () {
					return this.max.x >= this.min.x && this.max.y <= this.min.y
				}
				this.contains = function (v) {
					return this.valid() && v.x >= this.min.x && v.x <= this.max.x && v.y >= this.min.y && v.y <= this.max.y
				}
				this.pointInBox = function (
					v //不包含点在边界上
				) {
					return this.valid() && v.x > this.min.x && v.x < this.max.x && v.y > this.min.y && v.y < this.max.y
				}
				this.expandBy = function (v) {
					if (!this.valid()) {
						this.min = v
						this.max = v
						return
					}
					this.min.x = Math.min(this.min.x, v.x)
					this.min.y = Math.min(this.min.y, v.y)
					this.max.x = Math.max(this.max.x, v.x)
					this.max.y = Math.max(this.max.y, v.y)
				}
				this.clone = function () {
					return new Box(this.min.clone(), this.max.clone())
				}
				this.expandByEx = function (x, y) {
					if (!this.valid()) {
						this.min.set(x, y)
						this.max.set(x, y)
						return
					}
					this.min.x = Math.min(this.min.x, x)
					this.min.y = Math.min(this.min.y, y)
					this.max.x = Math.max(this.max.x, x)
					this.max.y = Math.max(this.max.y, y)
				}
				this.swap = function () {
					var temp = this.min
					this.min = this.max
					this.max = temp
				}
			}
			//对象类
			function ObjectEx(name) {
				this.mName = typeof name == undefined ? '对象' : name //名字
				this.mSpeed = 0 //速度
				this.mTimestamp = 0 //时间戳
				this.mAngle = 0 //角度
				this.mNextAngle = 0 //下一个角度
				this.mAngleSpeed = 0 //角速度
				this.mASpeed = 0 //加速度
				this.mBox = null //包围盒
				this.mPos = new Point(0, 0) //当前位置
				this.mPath = null //当前path
				this.mIdx = 0 //当前path索引
				this.mPositive = true //path正向的
				this.mCycle = true //循环的
				this.mTarget = null
				this.mCanRoate = false
				this.mIsFlow = false
				this.setPos = function (x, y) {
					// console.log(new EV.LngLat(x,y),x,y);
					this.mPos = new Point(x, y)
					if (this.mTarget != null) {
						this.mTarget.setLngLat(new EV.LngLat(this.mPos.x, this.mPos.y))
					}
					if (map && this.mIsFlow) {
						//设置地图center点

						map.setCenter(new EV.LngLat(x, y), 18)
					}
				}
				this.setFlow = function (isFlow) {
					this.mIsFlow = isFlow
				}
				this.setSpeed = function (speed) {
					this.mSpeed = speed
				}
				this.setPath = function (path) {
					this.mPath = path
				}
				this.setRotation = function (angle) {
					this.mAngle = angle
					if (this.mTarget != null) {
						this.mTarget.setRotation((this.mAngle * 180.0) / PI)
					}
				}
				this.setIcon = function (url) {
					if (this.mTarget != null) {
						this.mTarget.setIcon(url)
					}
				}
				this.update = function (tickDelta) {
					if (this.mPath == null) return
					var len = this.mPath.length
					if (len < 2) return
					//位置变化
					if (this.mIdx > len - 2) {
						//非循环播放返回
						if (!this.mCycle) return
						this.mPositive = false
					} else if (this.mIdx < 1) {
						//非循环播放返回
						if (!this.mCycle) return
						this.mPositive = true
					}
					var pos1 = null
					var pos2 = null
					if (this.mPositive) {
						//path正向
						pos1 = this.mPath[this.mIdx]
						pos2 = this.mPath[this.mIdx + 1]
					} //path反向
					else {
						pos1 = this.mPath[this.mIdx]
						pos2 = this.mPath[this.mIdx - 1]
					}
					var dx1 = pos2.x - pos1.x
					var dy1 = pos2.y - pos1.y
					//两个点相同
					if (dx1 == 0 && dy1 == 0) {
						//下一关键点
						this.setPos(pos2.x, pos2.y)
						if (this.mPositive)
							//path正向
							this.mIdx++
						else this.mIdx--
						return
					}
					var tAngle = 0
					if (dx1 == 0) {
						tAngle = dy1 > 0 ? (3.0 * PI) / 2.0 : PI / 2.0
					} else if (dx1 > 0) {
						tAngle = dy1 > 0 ? 2.0 * PI - Math.atan(dy1 / dx1) : -Math.atan(dy1 / dx1)
					} else {
						tAngle = PI - Math.atan(dy1 / dx1)
					}
					this.setRotation(tAngle)
					//更新方向
					tAngle = 2.0 * PI - tAngle
					var x = this.mPos.x + this.mSpeed * Math.cos(tAngle) * tickDelta
					var y = this.mPos.y + this.mSpeed * Math.sin(tAngle) * tickDelta

					//检测是否到达pos2点
					var dx2 = x - pos1.x
					var dy2 = y - pos1.y
					var tx = dx2 / dx1
					var ty = dy2 / dy1
					var isArrivePos2 = false
					if (isNaN(tx) && ty >= 1) {
						isArrivePos2 = true
					} else if (isNaN(ty) && tx >= 1) {
						isArrivePos2 = true
					} else {
						if (tx >= 1 || ty >= 1) {
							isArrivePos2 = true
						}
					}
					//到达了pos2
					if (isArrivePos2) {
						x = pos2.x
						y = pos2.y
						if (this.mPositive)
							//path正向
							this.mIdx++
						else this.mIdx--
					}
					this.setPos(x, y)
				}
				this.reset = function () {
					this.mPositive = true
					this.setIdx(0)
				}
				this.attachTo = function (map) {
					if (typeof map == undefined || map == null) return
					this.mTarget = new EV.Marker(new EV.LngLat(this.mPos.x, this.mPos.y), {
						label: this.mName,
						//fontWeight: "bold",
						fontColor: '#000',
						fontSize: '12px',
						labelAlign: 'middle',
						//labelOutlineColor: "#FFDE66",
						//labelOutlineWidth: 0,
						labelYOffset: 26,
						graphicWidth: 22,
						graphicHeight: 30,
						graphicYOffset: -16,

						labelPadding: 4,
						labelBackGroundVisible: true,
						labelBackGroundRX: 3,
						labelBackGroundRY: 3,
						labelBackGroundOpacity: 0.9,
						labelBackGroundBorder: 1,
						labelBackGroundBorderColor: '#909090',
						labelBackGroundFill: '#fafafa'
					})

					map.addOverlay(this.mTarget)
				}
				this.setIdx = function (idx) {
					this.mIdx = idx
					if (this.mPath == null) return
					var len = this.mPath.length
					if (len < 2) return
					if (this.mIdx > len - 1) return

					var pos1 = null
					var pos2 = null
					var x = 0
					var y = 0
					var tAngle = 0
					//位置变化
					if (this.mIdx > len - 2) {
						if (this.mPositive) {
							pos1 = this.mPath[this.mIdx - 1]
							pos2 = this.mPath[this.mIdx]
							x = pos2.x
							y = pos2.y
						} else {
							pos1 = this.mPath[this.mIdx]
							pos2 = this.mPath[this.mIdx - 1]
							x = pos1.x
							y = pos1.y
						}
					} else if (this.mIdx < 1) {
						if (this.mPositive) {
							pos1 = this.mPath[this.mIdx]
							pos2 = this.mPath[this.mIdx + 1]
							x = pos1.x
							y = pos1.y
						} else {
							pos1 = this.mPath[this.mIdx - 1]
							pos2 = this.mPath[this.mIdx]
							x = pos2.x
							y = pos2.y
						}
					} else {
						if (this.mPositive) {
							//path正向
							pos1 = this.mPath[this.mIdx]
							pos2 = this.mPath[this.mIdx + 1]
							x = pos1.x
							y = pos1.y
						} //path反向
						else {
							pos1 = this.mPath[this.mIdx]
							pos2 = this.mPath[this.mIdx - 1]
							x = pos1.x
							y = pos1.y
						}
					}
					var dx1 = pos2.x - pos1.x
					var dy1 = pos2.y - pos1.y
					tAngle = PI - Math.atan2(dy1 / dx1)
					this.setRotation(tAngle)
					this.setPos(x, y)
				}
				this.detachFrom = function (map) {}
			}

			var PI = 3.14159265359
			var map = null
			var cars = new Array()
			var timer = null
			var interval = 100
			$(document).ready(function () {
				map = new EV.Map('map')
				//隐藏自带工具条
				$('#map .map_toolbar').hide()
				$('#map .map_toolbarctrl').hide()

				//   $("#id_guiji").click(function(e){
				//	    var value = $(this).attr("value");
				//	    map.toolbar.activateToolByName(value);
				//  });
				//   var c =  map.toolbar.getToolsByName("addline")[0];
				//   c.addEventListener("done",featureadded);
				//   function featureadded(e) {
				//	   var geometry = e.overlay.geometry;
				//       var sp = geometry.getVertices();
				//       if(sp.length < 2)
				//    	   return;
				//       var dp = new Array(sp.length);
				//       var pathStr = "[";
				//       var first = true;
				//       for (var i = 0; i < sp.length; i++) {
				//    	   var pt = new EV.LngLat.WM(sp[i].x, sp[i].y);
				//    	   dp[i] = new Point(pt.getLon() , pt.getLat());
				//
				//    	   if(first)
				//    	   {
				//    		   pathStr += "{x:"+pt.getLon() + ",y:"+pt.getLat() +"}";
				//    		   first = false;
				//    	   }
				//    	   else
				//    	   {
				//    		   pathStr += ",{x:"+pt.getLon() + ",y:"+pt.getLat() +"}";
				//    	   }
				//       }
				//       pathStr += "]";
				//       alert(pathStr);
				//       var center = map.getCenterPoint();
				//       var zoom   = map.getZoom();
				//       alert("{lon:"+center.getLon()+",lat:"+center.getLat()+",zoom:"+zoom+"}");
				//
				//       var car = new ObjectEx("汽车");
				//       car.setPath(dp);
				//       car.setSpeed(0.00001);
				//       car.attachTo(map);
				//       car.setPos(dp[0].x,dp[0].y);
				//       car.setIcon("images/car_0.png");
				//       car.reset();
				//       cars.push(car);
				//       updateSpeed($("#id_speed").val());
				//   }

				var jqSlider = $('#id_slider')
				jqSlider
					.slider({
						orientation: 'horizontal',
						range: 'min',
						max: 100,
						value: 0,
						slide: function (event, ui) {
							for (var i = 0; i < cars.length; ++i) {
								var car = cars[i]
								car.setIdx(ui.value)
							}
						}
					})
					.children('.ui-slider-range')
					.css('background', ' #729fcf')

				$('#id_guiji').click(function (e) {
					if (cars.length == 0) {
						//		   var path = [{x:116.44602954387291,y:39.94637501713706},{x:116.44635677337017,y:39.94633800365393},{x:116.44669473170735,y:39.94623518831877},{x:116.4468610286682,y:39.946148823318254},{x:116.44701123237363,y:39.94598843088488},{x:116.44710779189725,y:39.945655306936075},{x:116.44727945327358,y:39.945346857389026},{x:116.4474833011608,y:39.9452728292909},{x:116.44781589508247,y:39.9453180686943},{x:116.44897997379049,y:39.94591851611604},{x:116.44969344139122,y:39.94612414758369},{x:116.44967734813581,y:39.94625163878321},{x:116.44985973835207,y:39.9462886523117},{x:116.44998848437761,y:39.9463955801743},{x:116.4499831199621,y:39.94668346204788},{x:116.44821286201694,y:39.946667011687964},{x:116.44823968410337,y:39.94658887242307},{x:116.44824504851884,y:39.94631332798827},{x:116.44832551478704,y:39.94615293593993},{x:116.44815921784415,y:39.94607068346081},{x:116.44812703132428,y:39.945971980357136},{x:116.44836843013786,y:39.945803362225234},{x:116.44757986068441,y:39.94547846269928},{x:116.44800901412975,y:39.94547023737529},{x:116.44774615765425,y:39.94534274472028},{x:116.44751012324718,y:39.945309843350316},{x:116.44731700419995,y:39.94536742073597},{x:116.4471399784081,y:39.945712884031025},{x:116.44701123237363,y:39.94608713396619},{x:116.44685566425271,y:39.94619817476134},{x:116.44668400287638,y:39.94629687753867},{x:116.44636213778564,y:39.94637912974515},{x:116.44636213778564,y:39.94662177317725}];

						var path = [
							{ x: 104.133992, y: 30.676597 },
							{ x: 104.133463, y: 30.676297 },
							{ x: 104.134623, y: 30.674913 },
							{ x: 104.134508, y: 30.670683 },
							{ x: 104.133202, y: 30.666372 },
							{ x: 104.130025, y: 30.663232 },
							{ x: 104.125117, y: 30.660918 },
							{ x: 104.123118, y: 30.66027 },
							{ x: 104.117045, y: 30.657735 },
							{ x: 104.114445, y: 30.656498 },
							{ x: 104.113258, y: 30.655583 },
							{ x: 104.11282, y: 30.655113 },
							{ x: 104.11283, y: 30.655103 },
							{ x: 104.112822, y: 30.655042 },
							{ x: 104.112208, y: 30.653327 },
							{ x: 104.109327, y: 30.648792 },
							{ x: 104.107708, y: 30.644805 },
							{ x: 104.113077, y: 30.643125 },
							{ x: 104.11766, y: 30.640948 },
							{ x: 104.121582, y: 30.63904 },
							{ x: 104.123018, y: 30.638403 },
							{ x: 104.124497, y: 30.637695 },
							{ x: 104.125402, y: 30.637375 },
							{ x: 104.12599, y: 30.637557 },
							{ x: 104.125985, y: 30.637817 },
							{ x: 104.125992, y: 30.637825 },
							{ x: 104.125992, y: 30.637812 },
							{ x: 104.125988, y: 30.637738 },
							{ x: 104.126115, y: 30.63759 },
							{ x: 104.126128, y: 30.6376 },
							{ x: 104.126147, y: 30.637598 },
							{ x: 104.126148, y: 30.637607 },
							{ x: 104.12614, y: 30.637607 },
							{ x: 104.12614, y: 30.637608 },
							{ x: 104.126135, y: 30.63761 },
							{ x: 104.126152, y: 30.637622 },
							{ x: 104.126138, y: 30.637643 },
							{ x: 104.126117, y: 30.637643 },
							{ x: 104.126132, y: 30.637652 },
							{ x: 104.12614, y: 30.637625 },
							{ x: 104.126123, y: 30.637622 },
							{ x: 104.126127, y: 30.63762 },
							{ x: 104.126142, y: 30.637635 },
							{ x: 104.126123, y: 30.637645 },
							{ x: 104.126125, y: 30.637647 },
							{ x: 104.126048, y: 30.637613 },
							{ x: 104.126063, y: 30.637748 },
							{ x: 104.126067, y: 30.63775 },
							{ x: 104.126065, y: 30.637742 },
							{ x: 104.126068, y: 30.637745 },
							{ x: 104.126075, y: 30.63774 },
							{ x: 104.126067, y: 30.637775 },
							{ x: 104.126123, y: 30.638103 },
							{ x: 104.125983, y: 30.637925 },
							{ x: 104.12596, y: 30.637618 },
							{ x: 104.125975, y: 30.637618 },
							{ x: 104.126088, y: 30.637597 },
							{ x: 104.126052, y: 30.63792 },
							{ x: 104.125767, y: 30.637873 },
							{ x: 104.12577, y: 30.637873 },
							{ x: 104.125767, y: 30.637858 },
							{ x: 104.125722, y: 30.637845 },
							{ x: 104.125872, y: 30.637483 },
							{ x: 104.125872, y: 30.637487 },
							{ x: 104.126157, y: 30.638455 },
							{ x: 104.126155, y: 30.638527 },
							{ x: 104.126585, y: 30.638747 },
							{ x: 104.131198, y: 30.639218 },
							{ x: 104.140735, y: 30.638833 },
							{ x: 104.146012, y: 30.637542 },
							{ x: 104.15489, y: 30.634478 },
							{ x: 104.164352, y: 30.63012 },
							{ x: 104.175272, y: 30.625273 },
							{ x: 104.185787, y: 30.621897 },
							{ x: 104.186577, y: 30.6215 },
							{ x: 104.190695, y: 30.620978 },
							{ x: 104.204575, y: 30.618117 },
							{ x: 104.217603, y: 30.614922 },
							{ x: 104.23233, y: 30.611753 },
							{ x: 104.246238, y: 30.605798 },
							{ x: 104.259087, y: 30.600232 },
							{ x: 104.273842, y: 30.599112 },
							{ x: 104.288613, y: 30.597867 },
							{ x: 104.30189, y: 30.59568 },
							{ x: 104.313548, y: 30.593102 },
							{ x: 104.320318, y: 30.586492 },
							{ x: 104.328218, y: 30.579692 },
							{ x: 104.331032, y: 30.568683 },
							{ x: 104.33782, y: 30.560082 },
							{ x: 104.349845, y: 30.55593 },
							{ x: 104.354555, y: 30.546453 },
							{ x: 104.358482, y: 30.536293 },
							{ x: 104.363117, y: 30.526888 },
							{ x: 104.360635, y: 30.51897 },
							{ x: 104.361748, y: 30.515202 },
							{ x: 104.371202, y: 30.509223 },
							{ x: 104.381132, y: 30.500655 },
							{ x: 104.390905, y: 30.491017 },
							{ x: 104.401213, y: 30.482567 },
							{ x: 104.41275, y: 30.474132 },
							{ x: 104.424677, y: 30.468948 },
							{ x: 104.435835, y: 30.461213 },
							{ x: 104.448167, y: 30.453493 },
							{ x: 104.461512, y: 30.448337 },
							{ x: 104.474503, y: 30.44127 },
							{ x: 104.485265, y: 30.433825 },
							{ x: 104.495235, y: 30.425953 },
							{ x: 104.503293, y: 30.41456 },
							{ x: 104.508075, y: 30.402445 },
							{ x: 104.505323, y: 30.389303 },
							{ x: 104.51676, y: 30.381953 },
							{ x: 104.520415, y: 30.368808 },
							{ x: 104.528508, y: 30.35797 },
							{ x: 104.542053, y: 30.354102 },
							{ x: 104.555358, y: 30.34887 },
							{ x: 104.56452, y: 30.338612 },
							{ x: 104.569933, y: 30.32609 },
							{ x: 104.57694, y: 30.31417 },
							{ x: 104.579565, y: 30.301303 },
							{ x: 104.587592, y: 30.28989 },
							{ x: 104.592362, y: 30.277612 },
							{ x: 104.603875, y: 30.27027 },
							{ x: 104.608665, y: 30.25697 },
							{ x: 104.6063, y: 30.245135 },
							{ x: 104.601465, y: 30.233507 },
							{ x: 104.603677, y: 30.220347 },
							{ x: 104.60091, y: 30.208252 },
							{ x: 104.594185, y: 30.196862 },
							{ x: 104.597552, y: 30.18338 },
							{ x: 104.602038, y: 30.171678 },
							{ x: 104.603667, y: 30.158217 },
							{ x: 104.601807, y: 30.145527 },
							{ x: 104.600968, y: 30.132913 },
							{ x: 104.597427, y: 30.120562 },
							{ x: 104.60347, y: 30.108422 },
							{ x: 104.598792, y: 30.095928 },
							{ x: 104.597938, y: 30.082777 },
							{ x: 104.59852, y: 30.069008 },
							{ x: 104.59706, y: 30.056107 },
							{ x: 104.600158, y: 30.042503 },
							{ x: 104.603328, y: 30.029625 },
							{ x: 104.598992, y: 30.01746 },
							{ x: 104.599325, y: 30.003613 },
							{ x: 104.597972, y: 29.990167 },
							{ x: 104.602897, y: 29.977245 },
							{ x: 104.618418, y: 29.939968 },
							{ x: 104.61684, y: 29.927283 },
							{ x: 104.61725, y: 29.914128 },
							{ x: 104.62455, y: 29.905773 },
							{ x: 104.632757, y: 29.895288 },
							{ x: 104.6417, y: 29.884297 },
							{ x: 104.644145, y: 29.87275 },
							{ x: 104.652008, y: 29.86202 },
							{ x: 104.65868, y: 29.849602 },
							{ x: 104.671283, y: 29.842807 },
							{ x: 104.683638, y: 29.834875 },
							{ x: 104.691727, y: 29.823638 },
							{ x: 104.699155, y: 29.813615 },
							{ x: 104.709575, y: 29.804975 },
							{ x: 104.719925, y: 29.798148 },
							{ x: 104.728348, y: 29.789488 },
							{ x: 104.73865, y: 29.780723 },
							{ x: 104.750168, y: 29.774482 },
							{ x: 104.776887, y: 29.767533 },
							{ x: 104.790762, y: 29.76391 },
							{ x: 104.805657, y: 29.76305 },
							{ x: 104.81983, y: 29.762633 },
							{ x: 104.825553, y: 29.76117 },
							{ x: 104.825547, y: 29.761173 },
							{ x: 104.825538, y: 29.761165 },
							{ x: 104.825535, y: 29.761172 },
							{ x: 104.825547, y: 29.761178 },
							{ x: 104.825553, y: 29.761172 },
							{ x: 104.825555, y: 29.761172 },
							{ x: 104.825555, y: 29.761172 },
							{ x: 104.825553, y: 29.761172 },
							{ x: 104.82561, y: 29.761223 },
							{ x: 104.848277, y: 29.755333 },
							{ x: 104.862963, y: 29.753888 },
							{ x: 104.878857, y: 29.753145 },
							{ x: 104.891387, y: 29.747782 },
							{ x: 104.903777, y: 29.740375 },
							{ x: 104.916138, y: 29.731962 },
							{ x: 104.926158, y: 29.723152 },
							{ x: 104.946542, y: 29.691662 },
							{ x: 104.953882, y: 29.680003 },
							{ x: 104.963638, y: 29.669438 },
							{ x: 104.977358, y: 29.666398 },
							{ x: 104.984693, y: 29.64101 },
							{ x: 104.984928, y: 29.62788 },
							{ x: 104.987818, y: 29.614815 },
							{ x: 104.995523, y: 29.603097 },
							{ x: 105.005843, y: 29.59382 },
							{ x: 105.018055, y: 29.587958 },
							{ x: 105.02911, y: 29.578758 },
							{ x: 105.03518, y: 29.567995 },
							{ x: 105.044985, y: 29.558225 },
							{ x: 105.054628, y: 29.547402 },
							{ x: 105.06403, y: 29.537192 },
							{ x: 105.06332, y: 29.524555 },
							{ x: 105.079365, y: 29.503338 },
							{ x: 105.099733, y: 29.48407 },
							{ x: 105.110083, y: 29.475923 },
							{ x: 105.118015, y: 29.464548 },
							{ x: 105.131405, y: 29.459218 },
							{ x: 105.143312, y: 29.451068 },
							{ x: 105.149962, y: 29.439538 },
							{ x: 105.162268, y: 29.431368 },
							{ x: 105.171933, y: 29.421327 },
							{ x: 105.183508, y: 29.412662 },
							{ x: 105.206257, y: 29.396538 },
							{ x: 105.219233, y: 29.390592 },
							{ x: 105.232782, y: 29.388123 },
							{ x: 105.24644, y: 29.381982 },
							{ x: 105.259482, y: 29.375338 },
							{ x: 105.274318, y: 29.371673 },
							{ x: 105.299455, y: 29.356732 },
							{ x: 105.299232, y: 29.346233 },
							{ x: 105.287653, y: 29.321053 },
							{ x: 105.292515, y: 29.308568 },
							{ x: 105.298137, y: 29.295727 },
							{ x: 105.299572, y: 29.281825 },
							{ x: 105.302447, y: 29.268493 },
							{ x: 105.31196, y: 29.259363 },
							{ x: 105.323103, y: 29.250442 },
							{ x: 105.324073, y: 29.237285 },
							{ x: 105.324943, y: 29.224563 },
							{ x: 105.326898, y: 29.210453 },
							{ x: 105.316268, y: 29.143792 },
							{ x: 105.327415, y: 29.119702 },
							{ x: 105.330535, y: 29.106453 },
							{ x: 105.32513, y: 29.093555 },
							{ x: 105.343822, y: 29.073355 },
							{ x: 105.350697, y: 29.062012 },
							{ x: 105.356657, y: 29.048443 },
							{ x: 105.359612, y: 29.034635 },
							{ x: 105.359657, y: 29.02149 },
							{ x: 105.36289, y: 29.007977 },
							{ x: 105.372412, y: 28.983177 },
							{ x: 105.372577, y: 28.970328 },
							{ x: 105.372415, y: 28.95737 },
							{ x: 105.373768, y: 28.948457 },
							{ x: 105.380133, y: 28.948313 },
							{ x: 105.387502, y: 28.942603 },
							{ x: 105.391272, y: 28.936212 },
							{ x: 105.397667, y: 28.931382 },
							{ x: 105.398708, y: 28.930523 },
							{ x: 105.399007, y: 28.930335 },
							{ x: 105.399205, y: 28.93011 },
							{ x: 105.403697, y: 28.927542 },
							{ x: 105.407467, y: 28.92139 },
							{ x: 105.409355, y: 28.921583 },
							{ x: 105.414205, y: 28.919712 },
							{ x: 105.412178, y: 28.920313 },
							{ x: 105.41209, y: 28.920615 },
							{ x: 105.412097, y: 28.920613 },
							{ x: 105.412092, y: 28.920618 },
							{ x: 105.412083, y: 28.92059 },
							{ x: 105.412015, y: 28.920837 },
							{ x: 105.415625, y: 28.92318 },
							{ x: 105.423667, y: 28.928922 },
							{ x: 105.432343, y: 28.930152 },
							{ x: 105.431092, y: 28.924805 },
							{ x: 105.42843, y: 28.922325 },
							{ x: 105.428433, y: 28.922327 },
							{ x: 105.428412, y: 28.922273 },
							{ x: 105.42835, y: 28.922205 },
							{ x: 105.428352, y: 28.922195 },
							{ x: 105.430353, y: 28.923792 },
							{ x: 105.434793, y: 28.92983 },
							{ x: 105.428128, y: 28.930832 },
							{ x: 105.420523, y: 28.92657 },
							{ x: 105.413512, y: 28.922592 },
							{ x: 105.413002, y: 28.919353 },
							{ x: 105.411862, y: 28.92115 },
							{ x: 105.409557, y: 28.920947 },
							{ x: 105.40955, y: 28.920767 },
							{ x: 105.41027, y: 28.92091 },
							{ x: 105.410423, y: 28.92105 },
							{ x: 105.410423, y: 28.92105 },
							{ x: 105.410418, y: 28.92101 },
							{ x: 105.410408, y: 28.920968 },
							{ x: 105.410468, y: 28.920978 },
							{ x: 105.410498, y: 28.920987 },
							{ x: 105.410523, y: 28.920975 },
							{ x: 105.410527, y: 28.920985 },
							{ x: 105.410527, y: 28.920985 },
							{ x: 105.410533, y: 28.920998 },
							{ x: 105.410605, y: 28.920982 },
							{ x: 105.410357, y: 28.920402 },
							{ x: 105.410663, y: 28.920155 },
							{ x: 105.410667, y: 28.92015 },
							{ x: 105.410655, y: 28.920215 },
							{ x: 105.410687, y: 28.920247 },
							{ x: 105.41069, y: 28.920317 },
							{ x: 105.410712, y: 28.920155 },
							{ x: 105.410752, y: 28.920135 },
							{ x: 105.410795, y: 28.920133 },
							{ x: 105.410558, y: 28.920252 },
							{ x: 105.408762, y: 28.919997 },
							{ x: 105.408778, y: 28.919908 },
							{ x: 105.408795, y: 28.919845 },
							{ x: 105.408833, y: 28.919755 },
							{ x: 105.408842, y: 28.919733 },
							{ x: 105.408868, y: 28.919647 },
							{ x: 105.40891, y: 28.919458 },
							{ x: 105.409283, y: 28.918825 },
							{ x: 105.406998, y: 28.922682 },
							{ x: 105.402017, y: 28.928728 },
							{ x: 105.399165, y: 28.930528 },
							{ x: 105.393437, y: 28.934252 },
							{ x: 105.389618, y: 28.939008 },
							{ x: 105.386523, y: 28.94455 },
							{ x: 105.380102, y: 28.948727 },
							{ x: 105.373303, y: 28.953098 },
							{ x: 105.372735, y: 28.965837 },
							{ x: 105.371543, y: 28.979025 },
							{ x: 105.372233, y: 28.990438 },
							{ x: 105.366173, y: 29.002427 },
							{ x: 105.36166, y: 29.015195 },
							{ x: 105.359568, y: 29.028498 },
							{ x: 105.358718, y: 29.042287 },
							{ x: 105.353465, y: 29.055872 },
							{ x: 105.348227, y: 29.06759 },
							{ x: 105.339108, y: 29.078658 },
							{ x: 105.328235, y: 29.087072 },
							{ x: 105.328428, y: 29.098935 },
							{ x: 105.329015, y: 29.111715 },
							{ x: 105.327218, y: 29.125598 },
							{ x: 105.31909, y: 29.1369 },
							{ x: 105.316015, y: 29.149958 },
							{ x: 105.316213, y: 29.16332 },
							{ x: 105.319068, y: 29.176078 }
						]

						var view = { lon: 116.44869029521061, lat: 39.945640912654795, zoom: 18 }
						map.setLonLatZoom(view.lon, view.lat, view.zoom)

						var apt = new Array(path.length)
						var vt = new Array(path.length)
						for (var i = 0; i < path.length; ++i) {
							apt[i] = new Point(path[i].x, path[i].y)
							vt[i] = new EV.LngLat(path[i].x, path[i].y)
						}
						console.log(apt)
						console.log(vt)
						var line = new EV.PolyLine(vt, {
							strokeWidth: 3,
							strokeColor: 'green',
							strokeDashstyle: 'dash'
						})
						map.addOverlay(line)

						jqSlider.slider('option', 'max', path.length - 1)

						var car = new ObjectEx('从上地到北京天安门')
						car.setPath(apt)
						car.attachTo(map)
						car.setPos(apt[0].x, apt[0].y)
						car.setIcon('http://map.yiweihang.com/demo/anim/images/car_0.png')
						car.reset()
						car.setFlow(true)
						cars.push(car)
						updateSpeed($('#id_speed').val())
						$('#id_play').trigger('click')
					} else {
						$('#id_stop').trigger('click')
					}
				})

				//下面是工具条绑定事件类
				$('#id_manyou').click(function (e) {
					var value = $(this).attr('value')
					map.toolbar.activateToolByName(value)
				})
				$('#id_jietu').click(function (e) {
					var value = $(this).attr('value')
					map.toolbar.activateToolByName(value)
				})
				$('#id_flow input').change(function (e) {
					for (var i = 0; i < cars.length; ++i) {
						var car = cars[i]
						car.setFlow($(this).prop('checked'))
					}
				})
				var jqSpeed = $('#id_speed')
				jqSpeed.append(
					'<option value =\'60\'>60km/h</option>' +
						'<option value =\'120\'>120km/h</option>' +
						'<option value =\'160\'>160km/h</option>' +
						'<option value =\'200\'>200km/h</option>' +
						'<option value =\'300\'>300km/h</option>'
				)

				$('#id_play').bind('click', function (e) {
					console.log('1111111')
					if (timer == null) {
						//设置定时器
						timer = window.setInterval(function () {
							for (var i = 0; i < cars.length; ++i) {
								var car = cars[i]
								car.update(interval)
								jqSlider.slider('option', 'value', car.mIdx)
							}
						}, interval)
						$('#id_play .c_text').text('暂停')
						$('#id_play .ico_cls').removeClass('img_play')
						$('#id_play .ico_cls').addClass('img_pause')
					} else {
						window.clearInterval(timer)
						timer = null
						$('#id_play .c_text').text('播放')
						$('#id_play .ico_cls').removeClass('img_pause')
						$('#id_play .ico_cls').addClass('img_play')
					}
				})
				$('#id_stop').bind('click', function (e) {
					if (timer != null) {
						window.clearInterval(timer)
						timer = null
					}

					for (var i = 0; i < cars.length; ++i) {
						var car = cars[i]
						car.reset()
					}
					jqSlider.slider('option', 'value', 0)
					$('#id_play .c_text').text('播放')
					$('#id_play .ico_cls').removeClass('img_pause')
					$('#id_play .ico_cls').addClass('img_play')
				})
				$('#id_speed').change(function () {
					updateSpeed($('#id_speed').val())
				})
			})
			function updateSpeed(val) {
				var speed = val

				speed = (speed * 1000) / 3600 // 米/秒
				speed = speed / 1000 // 米/毫秒
				var center = map.getCenterPoint()
				var other = new EV.LngLat(center.getLon() + 1, center.getLat())
				var dis = center.distanceFrom(other)
				speed = speed / dis
				//转换为度毫秒
				console.log(val, speed)
				for (var i = 0; i < cars.length; ++i) {
					var car = cars[i]
					car.setSpeed(speed)
				}
			}
		</script>
		<style type="text/css">
			html {
				min-height: 100%;
				height: 100%;
			}
			body {
				margin: 0;
				padding: 0;
				min-height: 100%;
				height: 100%;
			}
			/*主区域*/
			.main {
				width: 100%;
				height: 100%;
				min-height: 100%;
			}
			/*地图*/
			.map {
				width: 100%;
				height: 100%;
				min-height: 100%;
			}
			/*工具条*/
			.tool {
				position: absolute;
				background: url(images/tool_bg.png) top left repeat-x;
				height: 30px;
				border: 1px solid #cccccc;
				text-align: right;
				width: 100%;
				z-index: 999;
			}
			/* .tool_a{text-decoration:none;font-size:12px;color:#4c4c4c;display:inline-block;line-height:20px;height:20px; padding:1px 5px; margin:4px 0px 0px 0px; text-align:center; }
.tool_a:hover{ background:url(images/ico_hover.jpg) repeat-x; border:1px solid #cccccc; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;padding:0px 4px;}
.tool_aex{text-decoration:none;font-size:12px;color:#4c4c4c;display:inline-block;line-height:20px;height:20px; padding:1px 5px; margin:4px 0px 0px 0px; text-align:center; }
.ico_cls{width:16px;height:16px;line-height:16px;float:left;margin-top:0px}
.img_manyou{background:url(images/tool_ico.png) no-repeat 0px   -16px;}
.img_quantu{background:url(images/tool_ico.png) no-repeat -16px -16px;}
.img_fangda{background:url(images/tool_ico.png) no-repeat -32px -16px;}
.img_suoxiao{background:url(images/tool_ico.png) no-repeat -48px -16px;}
.img_biaodian{background:url(images/tool_ico.png) no-repeat -64px -16px;}
.img_line{background:url(images/tool_ico.png) no-repeat -80px -16px;}
.img_area{background:url(images/tool_ico.png) no-repeat -96px -16px;}
.img_circle{background:url(images/tool_ico.png) no-repeat -112px -16px;}
.img_rect{background:url(images/tool_ico.png) no-repeat -128px -16px;}
.img_tuoyuan{background:url(images/tool_ico.png) no-repeat -144px -16px;}
.img_mdis{background:url(images/tool_ico.png) no-repeat -160px -16px;}
.img_marea{background:url(images/tool_ico.png) no-repeat -176px -16px;}
.img_select{background:url(images/tool_ico.png) no-repeat -192px -16px;}
.img_edit{background:url(images/tool_ico.png) no-repeat -208px -16px;}
.img_print{background:url(images/tool_ico.png) no-repeat -224px -16px;}
.img_jietu{background:url(images/tool_ico.png) no-repeat -240px -16px;}
.img_play{background:url(images/play.png) no-repeat;}
.img_pause{background:url(images/pause.png) no-repeat;}
.img_stop{background:url(images/stop.png) no-repeat;}
.c_text_span{margin:0px 0px 0px 2px;} */

			/* .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.1em;
	height: 1.1em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; } */
		</style>
	</head>
	<body>
		<div class="main">
			<div class="tool" id="tool">
				<a href="javascript:void(0)" value="addline" class="tool_a" id="id_guiji"
					><span class="ico_cls img_line"></span><span class="c_text_span">轨迹回放</span></a
				>
				<a href="javascript:void(0)" class="tool_a" id="id_flow"
					><input type="checkbox" checked="checked" /><span class="c_text_span">是否跟踪</span></a
				>
				<a href="javascript:void(0)" class="tool_a" id="id_play"
					><span class="ico_cls img_play"></span><span class="c_text_span c_text">播放</span></a
				>
				<div class="tool_aex" id="id_slider" style="padding: 0px 5px; width: 150px; height: 7px; line-height: 7px"></div>
				<a href="javascript:void(0)" class="tool_a" id="id_stop"><span class="ico_cls img_stop"></span><span class="c_text_span">停止</span></a>
				<a href="javascript:void(0)" class="tool_aex">速度：<select style="width: 100px; height: 20px" id="id_speed"></select></a>
				<a href="javascript:void(0)" value="nav" class="tool_a" id="id_manyou"
					><span class="ico_cls img_manyou"></span><span class="c_text_span">漫游</span></a
				>
				<a href="javascript:void(0)" value="screenshot" class="tool_a" style="margin-right: 20px" id="id_jietu"
					><span class="ico_cls img_jietu"></span><span class="c_text_span">截图</span></a
				>
			</div>
			<div class="map" id="map"></div>
		</div>
	</body>
</html>
